<script  lang="ts" setup name="Person">
  import {reactive,watch} from "vue";
  let preson = reactive({
    name:'张三',
    age:18,
    car:{
      car1:'奔驰',
      car2:'宝马'
    }
  })

  function changeName (){
    preson.name += '~'
  }
  function changeAge  (){
    preson.age += 1
  }
  function changeCar  (){
    preson.car = {car1: '爱玛',car2: '小鸟'}
  }
  //  监视，情况五：监视上述多个数据
  watch([()=>preson.car,()=>preson.name],(value, oldValue, onCleanup)=>{
    console.log('preson.car变化了',value,oldValue)
  },{deep:true})
</script>

<template>
  <div class="prisonBox">
    <h1>情况五：监视上述多个数据</h1>
    <h2 >姓名：{{preson.name}}</h2>
    <h2 >年龄：{{preson.age}}</h2>
    <h2 >车：{{preson.car.car1}}、{{preson.car.car2}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar">修改车</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>